How To...
List Control
Dynamically Populate List Control

How to Dynamically Populate List Columns and Data

Description

A List control can be dynamically repopulated with data from different tables.

Discussion

The List control can be dynamically populated with data from tables in a SQL Database. Both the columns shown and data in the List can be specified at run-time. This is different from specifying the data source at design time, wherein you may define a set of static data or a SQL query against a database that is used to determine the fields and data shown in the List.

The {dialog.object}.setListColumnsAndPopulate method can be used to define the columns and data in a List control. For example, assume you have a List and you have a JavaScript variable with this data:

[
    {
        "Firstname": "John",
        "Lastname": "Smith",
        "City": "Boston",
        "State": "MA"
    },
    {
        "Firstname": "Henry",
        "Lastname": "Rhodes",
        "City": "New York",
        "State": "NY"
    },
    {
        "Firstname": "Allison",
        "Lastname": "Berman",
        "City": "Los Angeles",
        "State": "CA"
    }

]

The 'columns' in the above data are Firstname, Lastname, City and State.

You might want to populate the List with this data and simultaneously set the display columns in the List to Firstname, Lastname, City and State.

At some later point you might have another Javascript variable with this data:

[
    {"Name" : "Fred Smith", "Age" : 30},
    {"Name" : "Tim King", "Age" : 23}
]

The 'columns' in the above data are Name and Age. You might want to populate the same List with this data and simultaneously set the display columns in the List to Name and Age.

The {dialog.Object}.setListColumnsAndPopulate(listName,data,options) method can be used to populate the List and set the List columns (based on the columns in the first row of data).

var data = [
    {
        "Firstname": "Kathy",
        "Lastname": "Morton",
        "City": "New York",
        "State": "NY"
    }
];

//populate List 'mylist' with the first 3 columns in data
var ops = {columnCount: 3};
{dialog.object}.setListColumnsAndPopulate('mylist',data,ops);

//specify columns
var ops = {columns: ['Firstname','State']};
{dialog.object}.setListColumnsAndPopulate('mylist',data,ops);

For full step-by-step instructions on dynamically populating a List with data from a SQL database, watch the video below:

Dynamically Populating a List's Columns and Data - Generic SQL Table Viewer

Click here to download the component used in the videos.